import { PlusOutlined } from '@ant-design/icons'
import { Button, Divider, Input, Popconfirm, Table,Select,InputNumber,DatePicker ,message} from 'antd'
import React, { useState, useEffect } from 'react'
import styles from '../style.less'
const { Option } = Select;
import {findDictionary,queryInternalPage,saveInternalAward,updateInternalAward,deleteInternalAward} from '../../service';
import moment from 'moment';

const InternalAwardTable = ({ oid,empCode }) => {
  const [clickedCancel, setClickedCancel] = useState(false);
  const [loading, setLoading] = useState(false);
  const [index, setIndex] = useState(0);
  const [cacheOriginData, setCacheOriginData] = useState({});
  const [data, setData] = useState([]);
  const [categoryType,setCategoryType] = useState([]);
  const [modeList,seModeList] = useState([]);

  const updateList = () => {
    queryInternalPage(oid).then((res = []) => {
      setData(res.data.map((item, index) => {
        return { ...item, key: index }
      }));
      setLoading(false)
    })
  };

  useEffect(() => {
    if(oid){
      findDictionary("CODE_RewardPunishMentType").then(res => {
        setCategoryType(res);
      });
      findDictionary("CODE_jiangchengfangshi").then(res => {
        seModeList(res);
      });
      updateList()
    }
  }, []);

  const getRowByKey = (key, newData) => (newData || data)?.filter((item) => item.key === key)[0];

  const toggleEditable = (e, key) => {
    e.preventDefault();
    const newData = data?.map((item) => ({ ...item }));
    const target = getRowByKey(key, newData);
    if (target) {
      // 进入编辑状态时保存原始数据
      if (!target.editable) {
        cacheOriginData[key] = { ...target };
        setCacheOriginData(cacheOriginData);
      };
      target.editable = !target.editable;
      setData(newData);
    }
  };

  const newMember = () => {
    const newData = data?.map((item) => ({ ...item })) || [];
    newData.push({
      key: `NEW_TEMP_ID_${index}`,
      editable: true,
      isNew: true,
      oid: oid,
      empCode:empCode
    });
    setIndex(index + 1);
    setData(newData)
  };

  const remove = (id) => {
    setLoading(true);
    deleteInternalAward(id).then(() => {
      updateList()
    })
  };

  const handleFieldChange = (e, fieldName, key) => {
    const newData = [...data];
    const target = getRowByKey(key, newData);
    if (target) {
      if(fieldName === 'jcTime' && e === null){
        message.error("奖惩时间不能为空！");
        return;
      }
      target[fieldName] = e.target ? e.target.value : e;
      setData(newData)
    }
  };

  const saveRow = (e, rowKey) => {
    e.persist();
    setLoading(true);
    if (clickedCancel) {
      setClickedCancel(false);
      return
    }
    const target = getRowByKey(rowKey) || {};
    toggleEditable(e, rowKey);
    const { isNew, editable, key, ...payload } = target;
    saveInternalAward(payload).then(() => {
      updateList();
    })
  };

  const updateRow = (e, rowKey, oid) => {
    e.persist();
    setLoading(true);
    if (clickedCancel) {
      setClickedCancel(false);
      return
    }
    const target = getRowByKey(rowKey) || {};
    toggleEditable(e, rowKey);
    const { isNew, editable, key, ...payload } = target;
    updateInternalAward({ oid, ...payload }).then(() => {
      updateList()
    })
  };

  const cancel = (e, key) => {
    setClickedCancel(true);
    e.preventDefault();
    const newData = [...data]; // 编辑前的原始数据

    let cacheData = [];
    cacheData = newData.map((item) => {
      if (item.key === key) {
        if (cacheOriginData[key]) {
          const originItem = { ...item, ...cacheOriginData[key], editable: false };
          delete cacheOriginData[key];
          setCacheOriginData(cacheOriginData);
          return originItem;
        }
      }
      return item;
    });
    setData(cacheData);
    setClickedCancel(false);
  };

  const columns = [
    {
      title: '奖惩类别',
      dataIndex: 'category',
      render: (text, record) => {
        if (record.editable) {
          return (
            <Select placeholder="请选择" value={text} onChange={(e) => handleFieldChange(e, 'category', record.key)}>
              {categoryType?.map((item, index) => {
                return (
                  <Option value={`${item.value}`} key={index}>
                    {item.label}
                  </Option>
                )
              })}
            </Select>
          )
        }
        return categoryType.find((item) => item.value === text)?.label;
      },
    },
    {
      title: '奖惩方式',
      dataIndex: 'mode',
      render: (text, record) => {
        if (record.editable) {
          return (
            <Select placeholder="请选择" value={text} onChange={(e) => handleFieldChange(e, 'mode', record.key)}>
              {modeList?.map((item, index) => {
                return (
                  <Option value={`${item.value}`} key={index}>
                    {item.label}
                  </Option>
                )
              })}
            </Select>
          )
        }
        return modeList.find((item) => item.value === text)?.label;
      },
    },
    {
      title: '奖惩事由',
      dataIndex: 'cause',
      render: (text, record) => {
        if (record.editable) {
          return (
            <Input
              value={text}
              autoFocus
              onChange={(e) => handleFieldChange(e, 'cause', record.key)}
              placeholder="请输入奖惩事由"
            />
          )
        }
        return text;
      },
    },
    {
      title: '奖惩金额',
      dataIndex: 'amount',
      render: (text, record) => {
        if (record.editable) {
          return (
            <InputNumber
              style={{width: '100%'}}
              value={text}
              min={0}
              autoFocus
              onChange={(e) => handleFieldChange(e, 'amount', record.key)}
              placeholder="请输入奖惩金额"
            />
          )
        }
        return text
      },
    },
    {
      title: '奖惩时间',
      dataIndex: 'jcTime',
      render: (text, record) => {
        if (record.editable) {
          return (
            <DatePicker value={text ? moment(text) : ''} placeholder="请选择奖惩时间" onChange={(e) => handleFieldChange(e, 'jcTime', record.key)}
                        className='widthStyle'/>
          )
        }
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : '';
      },
    },
    {
      title: '操作',
      key: 'action',
      width: '160px',
      render: (text, record) => {
        if (!!record.editable && loading) {
          return null
        }

        if (record.editable) {
          if (record.isNew) {
            return (
              <span>
                <a onClick={(e) => saveRow(e, record.key)}>添加</a>
                <Divider type="vertical"/>
                <Popconfirm title="是否要删除此行？" cancelText='取消' okText='确认' onConfirm={updateList}>
                  <a>删除</a>
                </Popconfirm>
              </span>
            )
          }

          return (
            <span>
              <a onClick={(e) => updateRow(e, record.key, record.oid)}>保存</a>
              <Divider type="vertical"/>
              <a onClick={(e) => cancel(e, record.key)}>取消</a>
            </span>
          )
        }

        return (
          <span>
            <a onClick={(e) => toggleEditable(e, record.key)}>编辑</a>
            <Divider type="vertical"/>
            <Popconfirm title="是否要删除此行？" cancelText='取消' okText='确认' onConfirm={() => remove(record.id)}>
              <a>删除</a>
            </Popconfirm>
          </span>
        )
      },
    },
  ];

  return (
    <>
      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        pagination={false}
        rowClassName={(record) => (record.editable ? styles.editable : '')}
      />
      <Button
        style={{
          width: '100%',
          marginTop: 16,
          marginBottom: 8,
        }}
        type="dashed"
        onClick={newMember}
      >
        <PlusOutlined/>
        新增奖惩
      </Button>
    </>
  )
};

export default (InternalAwardTable);

